<template>
  <div class="box" @click="thisFalse">
    <div>
      <div class="btn_group">
        <button
          :class="{ active: input_btn == '直播' }"
          @click="
            $router.push(`/talent_main/liveSearchRoot?keyword=${keywords}`)
          "
        >直播搜索</button>
        <button :class="{ active: input_btn == '商品' }" @click="input_btn = '商品'">商品搜索</button>
        <button
          :class="{ active: input_btn == '达人' }"
          @click="$router.push(`/talent_main/search?keyword=${keywords}`)"
        >达人搜索</button>
      </div>
    </div>
    <div id="searchRoot_01">
      <div>
        <div class="mysearchBox">
          <div class="input_group">
            <input
              type="text"
              v-model="keywords"
              @keyup.enter="toSearch"
              placeholder="请输入商品标题或关键词进行搜索"
              @click.stop="Inputfocus"
            />
            <div @click="toSearch">
              <img src="@/assets/meng/search01.png" />
            </div>
          </div>
          <div class="clearBox" @click="clear_values">
            <img src="@/assets/li/clearAll.png" alt />
            <span>重置筛选条件</span>
          </div>
          <!-- 搜索记录框 -->
          <div
            class="InputRecord"
            v-show="isShow && searchRecord.length !== 0 && keywords.length == 0"
          >
            <ul>
              <li class="first">
                搜索记录
                <img src="@/assets/zhao/delete.png" alt @click="removeAll()" />
              </li>
              <li
                class="second"
                v-for="(item, index) in searchRecord"
                :key="index"
                @click="add_click(item.log)"
              >
                <span>{{ item.log }}</span>
                <img src="@/assets/meng/my_header01.png" alt @click.stop="removeThis(item.id)" />
              </li>
            </ul>
          </div>
        </div>

        <!-- 商品种类 -->
        <div class="mt_20">
          <category_goods v-model="checkedDatasJoe" />
        </div>
        <!-- 筛选条件 -->
        <div v-show="showCondition">
          <section class="section01 dividerBox">
            <p>筛选条件</p>
            <div>
              <el_select
                v-model="price"
                title="商品价格"
                src="../../../../static/wang/priceS.png"
                :options="[
                  '不限',
                  '1-50',
                  '50-100',
                  '100-300',
                  '300-500',
                  '500-1000',
                  '>1000'
                ]"
              />
              <el_select
                class="biliwl"
                v-model="rate"
                title="佣金比例"
                src="../../../../static/wang/biliS.png"
                :options="['不限', '<20%', '20%-30%', '>30%']"
              />
              <el_select
                v-model="source"
                title="商品来源"
                src="../../../../static/wang/sourceS.png"
                :options="[
                  '不限',
                  '京东',
                  '淘宝',
                  '小店',
                  '天猫',
                  '苏宁',
                  '考拉'
                ]"
              />
              <el_select
                v-model="assVideo"
                title="关联视频"
                src="../../../../static/wang/videoS.png"
                :options="['不限', '<10', '10-50', '50-100', '>100']"
              />
              <el_select
                v-model="dySales"
                title="昨日总销量"
                src="../../../../static/wang/dataS.png"
                :options="[
                  '不限',
                  '<1万',
                  '1万-10万',
                  '10万-50万',
                  '50万-100万',
                  '100万-200万',
                  '>200万'
                ]"
              />
              <!-- <el_select
          class="dyscan"
          v-model="dyViews"
          title="昨日抖音浏览量"
          src="../../../../static/wang/lookS.png"
          :options="[
            '不限',
            '<1万',
            '1万-10万',
            '10万-50万',
            '50万-100万',
            '100万-200万',
            '>200万',
          ]"
              />-->
              <multi_select v-model="multiVaulue" class="multiBox" :options="['有优惠券']" />
            </div>
          </section>
          <!-- 多选 -->

          <div class="dividerBox">
            <div class="dividerText" @click="showCondition = false">
              <img src="@/assets/li/closeCon.png" alt />
              收起筛选条件
            </div>
          </div>

          <!-- 按钮 -->
          <!-- <section class="confirm_clear">
        <button @click="toSearch()">开始搜索</button>
        <button @click="clear_values">清空所选条件</button>
          </section>-->
        </div>
        <div class="dividerBox" v-show="!showCondition">
          <div class="dividerText" @click="showCondition = true">
            <img src="@/assets/li/openCon.png" alt />
            展开筛选条件
          </div>
        </div>
      </div>
    </div>
    <!-- <RadioGroupSort
      :radio_values="['按昨日抖音订单量', '按昨日抖音浏览量', '按昨日转化率']"
      v-model="KindName"
      class="searchRadio"
    />-->

    <div id="searchRes">
      <section>
        <!-- 共搜索到n条结果（已经取消） -->
        <ul
          class="fixedThead"
          ref="fixedThead"
          :class="{ isShow: isFixed }"
          :style="showLeft == true ? 'left:98px' : 'left:222px'"
        >
          <li pl>商品</li>
          <li
            tc
            :style="{ cursor: sortValue == 7 ? 'text' : 'pointer' }"
            @click="sort_fun(false, 7)"
          >
            售价
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 7"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
          </li>
          <li
            tc
            :style="{ cursor: sortValue == 6 ? 'text' : 'pointer' }"
            @click="sort_fun(false, 6)"
          >
            佣金率
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 6"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
          </li>
          <li
            tc
            :style="{ cursor: sortValue == 1 ? 'text' : 'pointer' }"
            @click="sort_fun(false, 1)"
          >
            昨日总销量
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 1"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
          </li>
          <li
            tc
            :style="{ cursor: sortValue == 2 ? 'text' : 'pointer' }"
            @click="sort_fun(false, 2)"
          >
            直播销量
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 2"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
          </li>
          <li
            tc
            :style="{ cursor: sortValue == 3 ? 'text' : 'pointer' }"
            @click="sort_fun(false, 3)"
          >
            视频销量
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 3"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
          </li>
          <li
            tc
            :style="{ cursor: sortValue == 4 ? 'text' : 'pointer' }"
            @click="sort_fun(false, 4)"
          >
            近30天关联视频数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 4"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
          </li>
          <li
            tc
            pr
            :style="{ cursor: sortValue == 5 ? 'text' : 'pointer' }"
            @click="sort_fun(false, 5)"
          >
            近30天关联直播数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 5"
              class="sort m_l"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort m_l" />
          </li>
        </ul>
        <table class="table" ref="tableEl">
          <thead :class="{ is_fixed: isFixed }" ref="th_tr_El">
            <tr>
              <th>商品</th>
              <th
                :style="{ cursor: sortValue == 7 ? 'text' : 'pointer' }"
                @click="sort_fun(false, 7)"
              >
                售价
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 7"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
              </th>
              <th
                :style="{ cursor: sortValue == 6 ? 'text' : 'pointer' }"
                @click="sort_fun(false, 6)"
              >
                佣金率
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 6"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
              </th>
              <th
                :style="{ cursor: sortValue == 1 ? 'text' : 'pointer' }"
                @click="sort_fun(false, 1)"
              >
                昨日总销量
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 1"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
              </th>
              <th
                :style="{ cursor: sortValue == 2 ? 'text' : 'pointer' }"
                @click="sort_fun(false, 2)"
              >
                直播销量
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 2"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
              </th>
              <th
                :style="{ cursor: sortValue == 3 ? 'text' : 'pointer' }"
                @click="sort_fun(false, 3)"
              >
                视频销量
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 3"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
              </th>
              <th
                :style="{ cursor: sortValue == 4 ? 'text' : 'pointer' }"
                @click="sort_fun(false, 4)"
              >
                近30天关联视频数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 4"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
              </th>
              <th
                :style="{ cursor: sortValue == 5 ? 'text' : 'pointer' }"
                @click="sort_fun(false, 5)"
              >
                近30天关联直播数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 5"
                  class="sort m_l"
                />
                <img src="@/assets/meng/no_down_up.png" v-else class="sort m_l" />
              </th>
              <!-- <th>操作</th> -->
            </tr>
          </thead>
          <tbody v-if="resData.length != 0 && !loading">
            <tr v-for="(item, index) in resData" :key="'res' + index" :id="!index ? 'tr1' : ''">
              <td>
                <div class="goodsBox" @click="toGoodsDetails(item.proId, '0')">
                  <img :src="item.proLogo" class="preImg" v-errorImg:shop />
                  <p class="coverbox" v-if="item.proStatus == 1">已下架</p>
                  <div class="goodsRight">
                    <div class="top01">
                      <!-- 来源 -->
                      <div>
                        <SourceIcon :sourceid="item.profrom" class="source-page-icon" />
                      </div>
                      <!-- <el-tooltip
                        effect="light"
                        :content="item.proTitle"
                        :hide-after="2000"
                        placement="top"
                        popper-class="mytooltip"
                      >-->
                      <p class="overflowTextWl" style="-webkit-line-clamp: 2">{{ item.proTitle }}</p>
                      <!-- </el-tooltip> -->
                    </div>
                    <!-- <div class="bot01">
                      <p>
                        售价<span class="riceText">￥{{ item.proPrice }}</span>
                      </p>
                      <p>
                        佣金率
                        <span
                          class="rateText"
                          v-if="item.commissionRate != ''"
                          >{{ formatRate(item.commissionRate, 1) }}</span
                        >
                        <span class="rateText" v-else>--</span>
                      </p>
                    </div>-->
                  </div>
                </div>
              </td>
              <td class="td-red">￥{{ item.proPrice }}</td>
              <td>
                <span class="rateText" v-if="item.commissionRateStr != ''">
                  {{
                  item.commissionRateStr>1?'--':formatRate(item.commissionRateStr, 1)
                  }}
                </span>
                <span class="rateText" v-else>--</span>
              </td>
              <td>
                <p>{{ format_num(item.totalVolume) }}</p>
                <p class="updating" v-if="item.status == 0">未更新</p>
              </td>
              <td>
                <p>{{ format_num(item.liveVolume) }}</p>
                <p class="updating" v-if="item.status == 0">未更新</p>
              </td>
              <td>
                <!-- {{
                item.douYinConversionRatio > 100
                ? "--"
                : item.douYinConversionRatio + "%"
                }} -->
                {{ format_num(item.videoVolume) }}
              </td>
              <td>{{ format_num(item.associatedVideo) }}</td>
              <td>{{ format_num(item.associatedlive) }}</td>
              <!-- <td>
              <span> {{ formatRate(item.conversionRatio, 1) }}</span>
              </td>-->
              <!-- <td>
                <div
                  class="detailsBtnwl"
                  @click="toGoodsDetails(item.proId, '0')"
                >
                  查看详情
                </div>
              </td>-->
            </tr>
          </tbody>
        </table>
        <div class="upgradeBox" v-if="permissions">
          <RankUpgrade class="rankUpgrade" />
        </div>
        <!-- <div class="upgradeBox" v-if="!permissions &&!loading &&vipLevel==0">
          <RankUpgrade class="rankUpgrade" />
        </div> -->
        <!-- <p class="nothing" v-show="resData.length != 0 && resData.length < 30">我是有底线的～</p> -->
        <div class="pageBox">
          <el-pagination
            background
            v-if="!loading && nothing"
            layout="prev, pager, next, jumper"
            :total="count"
            :page-size="30"
            :current-page="page"
            @current-change="toSearch"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>
      </section>

      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <div class="empty" v-show="!nothing && !loading">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
      <!-- <el-dialog
        :visible.sync="permissions"
        v-if="permissions"
        top="40vh"
        class="dialog01"
        @close="closeBuy"
        custom-class="buyDialog"
      >
        <div class="toBuyWl">
          当前为免费版会员，仅可查看100个结果，立即<span @click="toBuy"
            >升级会员版本</span
          >，可查看更多数据
        </div>
      </el-dialog>-->
    </div>
  </div>
</template>

<script>
import SourceIcon from '@/component/SourceIcon.vue'
import RadioGroupSort from '@/component/radioGroupSort.vue'
import RankUpgrade from '@/component/rankUpgrade.vue'
import category_goods from '@/component/category_goods.vue'

export function trimStr(word) {
  return word.replace(/^\s+|\s+$/gm, '')
}
export default {
  components: {
    SourceIcon,
    RadioGroupSort,
    RankUpgrade,
    category_goods,
  },
  data() {
    return {
      checkedDatasJoe: {
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: [],
      },
      input_btn: '商品',
      keywords: '',
      goodsKind: {
        categoryName: '全部',
        id: '0',
        level: 0,
        sublist: null,
      },
      checkedDatas: [],
      price: '不限',
      rate: '不限',
      source: '不限',
      assVideo: '不限',
      dySales: '不限',
      dyViews: '不限',
      multiVaulue: '',
      KindName: '按昨日抖音订单量',
      cancel: null,
      resData: [],
      loading: true,
      busy: false,

      page: 1,
      permissions: false,
      showCondition: false,
      count: 0,
      nothing: true,
      //转化率
      conversion: '',
      isFixed: false,
      offsetTop: 0,
      showLeft: true,
      showScroll: 294,
      orderType: 'desc',
      sortValue: 1,
      categoryIdFirst: 0,
      categoryId: [],
      isShow: false, // 控制搜素框显示或隐藏
      searchRecord: [], //用来存放浏览记录
      vipLevel: '',
    }
  },
  computed: {
    changeData() {
      const {
        price,
        rate,
        source,
        assVideo,
        dySales,
        dyViews,
        multiVaulue,
        KindName,
      } = this
      return {
        price,
        rate,
        source,
        assVideo,
        dySales,
        dyViews,
        multiVaulue,
        KindName,
      }
    },
  },
  watch: {
    input_btn: function (newVal, oldVal) {
      if (newVal == '达人') {
        this.$router.push('./search')
      } else if (newVal == '直播') {
        this.$router.push('./liveSearchRoot')
      }
    },
    keywords: function (newVal, oldVal) {
      if (newVal == '') {
        this.page = 1
        this.resData = []
        this.toSearch()
      }
    },
    KindName: function (newVal, oldVal) {
      // this.KindName = newVal;
      this.resData = []
      this.page = 1
      //this.$store.commit("changeLiveSearch_page", this.page);
    },
    changeData() {
      this.resData = []
      this.toSearch()
    },
    '$store.state.left_nav_flag'(old, newOld) {
      this.showLeft = old
      this.setTBBar()
    },
    showCondition(old, newOld) {
      if (newOld) {
        this.showScroll = 294
      } else {
        this.showScroll = 450
      }
    },
    goodsKind(newVal, oldVal) {
      this.categoryIdFirst = newVal.id
      this.categoryId = []
      this.resData = []
      this.toSearch()
    },
    checkedDatas(n) {
      console.log(n)
    },
    checkedDatasJoe() {
      //新筛选组件用
      this.resData = []
      this.toSearch()
    },
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel'); //vip等级
    this.showLeft = this.$store.state.left_nav_flag
    // 如果从首页过来的 会带过来搜索词
    if (this.$route.query.keyword) {
      this.keywords = this.$route.query.keyword
    }
    this.toSearch()
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight)
    window.addEventListener('resize', () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar()
    })
  },

  methods: {
    childByValue(childValue) {
      // childValue就是子组件传过来的值
      this.categoryId = childValue
      this.resData = []
      this.toSearch()
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false
      let nodes = pNode.childNodes
      let newList = []
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i]
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node)
        }
      }
      return newList
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl
        let ulEl = this.$refs.fixedThead
        let tr1 = document.querySelector('#tr1')
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1)
          let liEls = this.getChilds(ulEl)
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + 'px'
          }
        }
      })
    },
    // 排序
    sort_fun(parm01, parm02) {
      // console.log(parm02)
      if (parm01) {
        this.orderType = 'asc'
      } else {
        this.orderType = 'desc'
      }
      if (this.sortValue == parm02) {
        this.noCursor = false
      } else {
        this.sortValue = parm02
        this.dataList = []
        this.page = 1
        this.toSearch()
      }
    },
    toSearch(cpage) {
      let that = this
      that.loading = true
      that.permissions = false
      that.busy = true
      if (typeof cpage == 'number') {
        this.backTop()
        that.page = cpage
      } else {
        that.page = 1
      }
      // 商品价格
      let priceR = -1
      if (that.price == '不限') {
        priceR = -1
      } else if (that.price == '1-50') {
        priceR = 1
      } else if (that.price == '50-100') {
        priceR = 2
      } else if (that.price == '100-300') {
        priceR = 3
      } else if (that.price == '300-500') {
        priceR = 4
      } else if (that.price == '500-1000') {
        priceR = 5
      } else if (that.price == '>1000') {
        priceR = 6
      }
      // 佣金比率
      let rateR = -1
      if (that.rate == '不限') {
        rateR = -1
      } else if (that.rate == '<20%') {
        rateR = 1
      } else if (that.rate == '20%-30%') {
        rateR = 2
      } else if (that.rate == '>30%') {
        rateR = 3
      }
      // 商品来源
      let sourceR = -1
      if (that.source == '不限') {
        sourceR = -1
      } else if (that.source == '京东') {
        sourceR = 0
      } else if (that.source == '淘宝') {
        sourceR = 1
      } else if (that.source == '小店') {
        sourceR = 2
      } else if (that.source == '天猫') {
        sourceR = 3
      } else if (that.source == '苏宁') {
        sourceR = 4
      } else if (that.source == '考拉') {
        sourceR = 5
      }
      // 关联视频
      let assVideoR = -1
      if (that.assVideo == '不限') {
        assVideoR = -1
      } else if (that.assVideo == '<10') {
        assVideoR = 1
      } else if (that.assVideo == '10-50') {
        assVideoR = 2
      } else if (that.assVideo == '50-100') {
        assVideoR = 3
      } else if (that.assVideo == '>100') {
        assVideoR = 4
      }
      //昨日抖音销量
      let dySalesR = -1
      if (that.dySales == '不限') {
        dySalesR = -1
      } else if (that.dySales == '<1万') {
        dySalesR = 1
      } else if (that.dySales == '1万-10万') {
        dySalesR = 2
      } else if (that.dySales == '10万-50万') {
        dySalesR = 3
      } else if (that.dySales == '50万-100万') {
        dySalesR = 4
      } else if (that.dySales == '100万-200万') {
        dySalesR = 5
      } else if (that.dySales == '>200万') {
        dySalesR = 6
      }
      // 昨日抖音浏览量
      let dyViewsR = -1
      if (that.dyViews == '不限') {
        dyViewsR = -1
      } else if (that.dyViews == '<1万') {
        dyViewsR = 1
      } else if (that.dyViews == '1万-10万') {
        dyViewsR = 2
      } else if (that.dyViews == '10万-50万') {
        dyViewsR = 3
      } else if (that.dyViews == '50万-100万') {
        dyViewsR = 4
      } else if (that.dyViews == '100万-200万') {
        dyViewsR = 5
      } else if (that.dyViews == '>200万') {
        dyViewsR = 6
      }
      // 多选 近30天上过抖音好物榜
      let isDiscover = 0
      if (that.multiVaulue.indexOf('近30天上过抖音好物榜') != -1) {
        isDiscover = 1
      } else {
        isDiscover = 0
      }
      //有优惠券
      let coupon = 0
      if (that.multiVaulue.indexOf('有优惠券') != -1) {
        coupon = 1
      } else {
        coupon = 0
      }
      let sort
      switch (that.KindName) {
        case '按昨日抖音订单量':
          sort = 1
          break
        case '按昨日抖音浏览量':
          sort = 2
          break
        case '按昨日转化率':
          sort = 3
          break
      }
      that.$axios
        .post(
          '/api/product/search',
          {
            key: that.trimStr(that.keywords),
            categoryId: '0',
            firstcategoryId: this.checkedDatasJoe.parentId,
            categoryIds: this.checkedDatasJoe.childIds,
            priceRange: priceR,
            commissionRateRange: rateR,
            source: sourceR,
            associatedVideoRange: assVideoR,
            volumeRange: dySalesR,
            viewRange: dyViewsR,
            isDiscover: isDiscover,
            coupon: coupon,
            sort: this.sortValue,
            pageIndex: that.page,
            pageSize: 30,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel()
              }
              that.cancel = c
            }),
          }
        )
        .then((response) => {
          that.loading = false;
          if (response.data.code1 ==1013||response.data.code == 1003||response.data.code ==1013) {
            that.resData = [];
            that.permissions = true;
          }
          if (response.data.code == 0) {
            that.resData = response.data.data
            if (response.data.count > 6000) {
              that.count = 6000
            } else {
              this.count = response.data.count
            }
            // this.count = response.data.count;
            that.nothing = true
            // response.data.data.length < 20
            //   ? (that.busy = true)
            //   : (that.busy = false);
            this.setTBBar()
          }
          if (response.data.code == 1002) {
            this.resData = []
            that.nothing = false
          }
        })
        .catch((error) => {
          console.log(error)
        })
      this.searchLogo()
    },
    searchLogo() {
      if (this.keywords) {
        // 记录搜索记录
        this.$axios({
          method: 'get',
          url: '/api/customer/RecordSearchLog',
          params: {
            key: this.keywords,
          },
        })
          .then((res) => {
            // console.log(res);
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    clear_values() {
      this.keywords = ''
      this.sortValue = 1
      this.goodsKind = '全部'
      this.price = '不限'
      this.rate = '不限'
      this.source = '不限'
      this.assVideo = '不限'
      this.dySales = '不限'
      this.dyViews = '不限'
      this.dyViews = '不限'
      this.dyViews = '不限'
      this.multiVaulue = ''
      this.page = 1
      this.resData = []
      this.checkedDatasJoe = {
        //组件监听此值是否为初始状态
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: [],
      }
      // this.toSearch();
    },
    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`,
      })
      window.open(router.href, '_blank')
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      })
      window.open(router.href, '_blank')
    },
    closeBuy() {
      this.page = 1
      this.resData = []
      this.toSearch()
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.isFixed = scrollTop > this.showScroll ? true : false
    },
    // 点击返回头部
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0
    },
    // 点击表单获取搜索记录
    Inputfocus() {
      this.isShow = true
      this.$axios({
        method: 'get',
        url: '/api/customer/GetSearchLog',
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.searchRecord = res.data.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 点击搜素记录赋值给搜索框
    add_click(item) {
      this.isShow = false
      this.keywords = item
      this.toSearch()
    },
    // 点击x 删除该条搜索记录
    removeThis(id) {
      this.$axios({
        method: 'get',
        url: '/api/customer/DeleteSearchLog',
        params: {
          ids: id,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.searchRecord = this.searchRecord.filter(
              (item) => item.id !== id
            )
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 点击删除图标删除全部搜索记录
    removeAll() {
      let itemLog = ''
      this.searchRecord.forEach((item) => {
        itemLog += item.id + ','
      })
      itemLog = itemLog.substring(0, itemLog.lastIndexOf(','))
      this.$axios({
        method: 'get',
        url: '/api/customer/DeleteSearchLog',
        params: {
          ids: itemLog,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.searchRecord = []
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 点击别处 让搜索记录框消失
    thisFalse() {
      this.isShow = false
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.initHeight)
  },
}
</script>
<style lang="less" scoped>
#searchRoot_01 {
  background: #fff;
  height: fit-content;
  margin-top: 18px;
  padding: 0 20px;
  padding-top: 17px;
  border-radius: 4px 4px 0 0;
  padding-bottom: 22px;
  // margin-bottom: 10px;
  //   min-height: 100vh;
  .mysearchBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .clearBox {
      cursor: pointer;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 30px;
      img {
        width: 15px;
        height: 16px;
      }
      span {
        font-size: 14px;
        color: #888888;
        padding-left: 5px;
      }
    }
    .showCondition {
      border-top: dashed 1px #e5e5e5;
    }
  }
  .input_group {
    position: relative;
    width: 400px;
    height: 44px;
    border-radius: 4px;
    // border: solid 1px #e6e6e6;
    border: solid 2px #fd7f2c;
    box-sizing: border-box;
    input {
      width: 100%;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      padding-left: 19px;
      padding-right: 70px;
      border: none;
      border-radius: 4px 4px 4px 4px;
      color: #222;
    }
    input::-webkit-input-placeholder  {
      color: #b5b5b5 !important;
    }
    > div {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: -1px;
      text-align: center;
      width: 50px;
      height: 42px;
      background-color: #fd7f2c;
      border-radius: 0px 4px 4px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 20px;
      }
    }
  }
  .InputRecord {
    width: 400px !important;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #fff !important;
    position: absolute !important;
    top: 192px !important;
    left: 222px;
    z-index: 10;
    padding: 4px 10px;
    box-shadow: 0px 0px 20px 0px rgba(236, 236, 236, 0.7);
    ul {
      .first {
        width: calc(100% - 14px);
        height: 32px;
        // background: chartreuse;
        font-size: 12px;
        line-height: 36px;
        color: #888888;
        padding-left: 14px;
        img {
          float: right;
          width: 15px;
          height: 16px;
          margin: 8px 9px 0px 0px;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .second {
        width: calc(100% - 14px);
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #222222;
        padding-left: 14px;
        span {
          display: inline-block;
          width: 300px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &:hover {
          cursor: pointer;
          background-color: #f9f9f9;
        }
        &:hover img {
          display: block;
        }
        img {
          float: right;
          margin: 13px 11px 0px 0px;
          display: none;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }

  .btn_group {
    .active {
      background-color: #fd7f2c;
      color: #ffffff !important;
    }
    button {
      font-size: 14px;
      width: 52px;
      color: #222222;
      height: 30px;
      border-radius: 4px 4px 0px 0px;
    }
    button:hover {
      color: #ff924b;
    }
  }
  .section01 {
    display: flex;
    padding-top: 18px;
    > div {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      max-width: 1600px;
    }
    #multi_select {
      // margin-bottom: 20px;
    }
    #el_select {
      margin-right: 30px;
      margin-bottom: 15px;
    }
    #el_select_city {
      margin-right: 30px;
      margin-bottom: 20px;
    }
    > p {
      white-space: nowrap;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 32px;
      letter-spacing: 0px;
      color: #888888;
      margin-right: 20px;
    }
  }
  .mb_15 {
    margin-bottom: 15px;
  }
  .multiBox {
    margin-left: 10px;
    padding-bottom: 20px;
  }
  .confirm_clear {
    margin-top: 132px;
    > button:first-child {
      background-color: #fd7f2c;
      color: #fff;
      line-height: 46px;
    }
    > button:last-child {
      background-color: #f5f5f5;
      border: solid 1px #e6e6e6;
      color: #888888;
      line-height: 44px;
      margin-left: 19px;
    }
    button {
      box-sizing: border-box;
      width: 150px;
      height: 48px;
      font-size: 16px;
      border-radius: 4px;
    }
  }
  //分割线
  .dividerBox {
    border-top: 1px dashed #e5e5e5;
    position: relative;
    .dividerText {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      font-size: 14px;
      color: #fd7f2c;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 14px;
      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
    }
  }
  #radio_group .radio_item {
    background-color: #fff !important;
  }
}
.box {
  // margin-left: 14px;
  flex: 1;
  background: #f1f1f1;
  min-height: 100vh;
  margin-left: 14px;
  margin-right: 14px;
  padding-bottom: 1px;
  margin-top: 14px;
}
.btn_group {
  margin-bottom: -8px;
  // margin-left: 20px;
  .active {
    background-color: #fd7f2c;
    color: #ffffff !important;
  }
  button {
    font-size: 14px;
    color: #555;
    width: 100px;
    height: 40px;
    background-color: #fff;
    border-radius: 4px;
    margin-right: 7px;
    font-weight: 600;
  }
}
#searchRes {
  background: #fff;
  // margin-left: 20px;
  padding: 0 20px;

  // padding-top: 17px;
  position: relative;
  // border-radius: 4px;
  height: fit-content;
  //padding-bottom: 60px;

  min-height: 75vh;
  .resNum {
    font-size: 14px;
    color: #888888;
    span {
      color: #1779ff;
      font-weight: 600;
    }
  }
  .tab01 {
    margin-top: 46px;
  }
  table {
    // margin-top: 19px;
    text-align: center;
    box-sizing: border-box;
    //margin-bottom: 20px;
    thead {
      th {
        padding: 0 5px;
        img {
          width: 5px;
          height: 10px;
          vertical-align: baseline;
        }
      }
      th:nth-child(1) {
        text-align: left;
        padding-left: 63px;
      }
      th:nth-child(7) {
        width: 12%;
      }
      th:last-child {
        padding-right: 30px;
      }
    }
    tbody {
      tr {
        height: 78px;
        td:nth-child(1) {
          width: 27%;
          text-align: left;
        }
        td:nth-child(2),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7) {
          width: 10%;
          font-family: DINAlternate-Bold;
          font-size: 15px;
        }
        td:last-child {
          padding-right: 30px;
          font-family: DINAlternate-Bold;
          font-size: 15px;
        }
        .td-red {
          color: #222;
        }
        // 商品
        .goodsBox {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          position: relative;
          // 商品已下架
          .coverbox {
            position: absolute;
            top: 0;
            left: 34px;
            width: 52px;
            height: 52px;
            line-height: 52px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 6px;
            font-size: 14px;
            color: #fff;
            text-align: center;
          }
          .preImg {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            margin-left: 33px;
            border: 1px solid #e5e5e5;
          }
          .source-page-icon {
            /deep/img {
              width: 14px;
              height: 14px;
              position: absolute;
              top: 3px;
            }
          }
          .goodsRight {
            position: relative;
            // flex: 1;
            width: 60%;
            text-align: left;
            margin-left: 13px;
            .top01 {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              img {
                width: 14px;
                height: 14px;
              }
              p {
                font-size: 14px;
                color: #222222;
                font-weight: 600;
                // padding-left: 5px;
              }
              p:hover {
                color: #fd7f2c;
              }
              .overflowTextWl {
                text-indent: 20px;
                line-height: 20px;
              }
            }
            .bot01 {
              margin-top: 16px;
              p {
                display: inline-block;
                font-size: 14px;
                color: #555555;
                padding-right: 24px;
              }
              .riceText {
                font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #ea1b0b;
                padding-left: 6px;
              }
              .rateText {
                font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #222222;
                padding-left: 8px;
              }
            }
          }
        }
        // 更新状态
        .updating {
          width: 62px;
          height: 22px;
          line-height: 22px;
          background-color: #f5f5f5;
          border-radius: 4px;
          font-size: 12px;
          color: #888888;
          text-align: center;
          margin: 0 auto;
          // border: solid 1px #e5e5e5;
        }
        .tdText01 {
          color: #222222;
          span {
            color: #1779ff;
          }
        }
      }
    }
  }
  .paginationBox {
    width: 100%;
    background-color: #fff;
    // margin-top: 10px;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    // padding-left: 1000px;
    .el-pagination {
      float: right;
    }
  }
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 222;
  font-size: 0;

  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    img {
      width: 5px;
      height: 10px;
      vertical-align: baseline;
    }
  }
  &.isShow {
    display: block;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
[pl] {
  padding-left: 63px;
}
[pr] {
  padding-right: 30px;
}
.m_l {
  margin-left: 4px;
}
</style>
